<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Introductions &mdash; ESL101 | OUWA</title>
  <link rel="stylesheet" type="text/css" href="/css/reset.css">
  <link rel="stylesheet" type="text/css" href="/css/video.2.css">
  <link rel="stylesheet" type="text/css" href="/css/mediaelementplayer.css">
  <script type="text/javascript" src="/js/jquery.js"></script>
  <script type="text/javascript" src="/js/scribd.js"></script>
  <!-- // <script type="text/javascript" src="/js/lecture.js"></script> -->
  <script type="text/javascript" src="/js/mediaelement-and-player.js"></script>
  <script type="text/javascript" src="/js/popcorn.js"></script>
  <script type="text/javascript" src="/js/popcorn.image.js"></script>
  <!-- // <script type="text/javascript" src="http://s3.www.universalsubtitles.org/static-cache/651c7135/js/mirosubs-widgetizer.js"></script> -->
  <!-- // <script type="text/javascript" src="http://connect.facebook.net/en_US/all.js#appId=193851800651213&amp;xfbml=1"></script> -->
  <script type="text/javascript">
    $(function() {
      $("#lectureVideo").mediaelementplayer({
        videoWidth: $("#video").width(),
        videoHeight: 0.5625 * $("#video").width(),
        startLanguage: "en"
      });
      var video = Popcorn("#lectureVideo").image({
        start: 0,
        end: 30,
        src: "/files/gettingstartedonenglish/time/Slide1.jpg",
        target: "slidesPlaceholder"
      }).image({
        start: 30,
        end: 60,
        src: "/files/gettingstartedonenglish/time/Slide2.jpg",
        target: "slidesPlaceholder"        
      }).image({
        start: 60,
        end: 75,
        src: "/files/gettingstartedonenglish/time/Slide3.jpg",
        target: "slidesPlaceholder"
      });
    });
    $(window).resize(function() {
      $("div.mejs-container").css("height", 0.5625 * $("div.mejs-container").width() + "px");
      $("div.mejs-layers > div").css("height", 0.5625 * $("div.mejs-container").width() + "px");
    });
  </script>
  <style type="text/css">
    div#slidesPlaceholder img {
      width: 100%;
    }
  </style>
</head>
<body>
  <header>
    <div id="leftNav">
      <h1 id="ouwaTitle" style="border-right: 0; padding-right: 0;"><span style="display: block; float: left; background: url('/css/triangle.png') no-repeat center right; padding-right: 30px;">OUWA</span></h1>
      <nav>
        <h1>Site Navigation</h1>
        <ul>
          <li>Dashboard</li>
          <li>Course 1</li>
          <li>Course 2</li>
          <li>Course 3</li>
          <li>Course 4</li>
          <li>Course 5</li>
        </ul>
      </nav>
      <!-- <h1 id="courseTitle">ESL101 <span style="font-size: 0.5em; position: relative; top: -3px;">&#9654;</span> Introductions</h1> -->
      <h1 id="courseTitle">ESL101</h1>
    </div>
    <div id="rightNav">
      <ul>
        <li>X <!-- Offline? --></li>
        <li>X <!-- Gmail --></li>
        <li>X <!-- Facebook --></li>
        <li>X <!-- Help --></li>
        <li style="width: auto; padding: 0 10px;">Liza Ng (Sign Out) <!-- Sign Out --></li>
      </ul>
    </div>
  </header>
  <article>
    <div id="lectureInfo" style="height: 70px; position: relative;">
      <h1 style="font-size: 40px; line-height: 70px; margin-left: 10px;">Introductions</h1>
      <a href="1.html" style="text-decoration: none; padding: 0 15px; width: auto; height: 20px; line-height: 20px; position: absolute; top: 25px; right: 10px; background: #000; color: #fff; border-radius: 10px;">Start!</a>
      <!-- <h2 style="font-size: 16px; float: right; position: relative; top: 10px; right: 10px;">&#9664; 1.1 The &ldquo;Hello&rdquo; Song &#9654;</h2> -->
      <div style="clear: both;"></div>
    </div>
    <div>
      <ol style="font-size: 16px;">
        <li style="font-weight: bold;"><a href="1.html">The &ldquo;Hello&rdquo; Song (video)</a></li>
        <li><a href="2.html">Introduction to Psychology (video)</a></li>
        <li>Exercise (exercise)</li>
        <li>Quiz (quiz)</li>
      </ol>
    </div>
    <!-- <div id="leftColumn" style="width: 57.14%;">
      <section id="video">
        <h2>Video</h2>
        <video id="lectureVideo" preload="preload" style="max-height: 100%;">
          <source src="/files/gettingstartedonenglish/hello.m4v" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
          <source src="/files/gettingstartedonenglish/hello.webm" type='video/webm; codecs="vp8, vorbis"'>
          <source src="/files/gettingstartedonenglish/hello.ogv" type='video/ogg; codecs="theora, vorbis"'>
          <track kind="subtitles" src="/files/gettingstartedonenglish/hello.srt" srclang="en" /> 
          <object type="application/x-shockwave-flash" data="flashmediaelement.swf">
            <param name="movie" value="flashmediaelement.swf">
            <param name="flashvars" value="controls=true&amp;poster=myvideo.jpg&amp;file=/files/psych110/01/video.mov">
            <img src="" width="320" height="240" title="No video playback capabilities">
          </object>
        </video>
      </section>
      <section id="notes">
        <h2>Notes</h2>
        <textarea>I am taking notes for this class.</textarea>
      </section>
    </div>
    <div id="rightColumn" style="width: 42.86%;">
      <section id="slides">
        <h2 style="display: none;">Slides</h2>
        <div id="slidesPlaceholder"></div>
      </section>
    </div> -->
    <div style="clear: both;"></div>
  </article>
  <footer>
    <p>Footer</p>
  </footer>
</body>
</html>